<template>
  <div class="detail" v-if="detail">
    <!-- 返回 -->
    <div class="back" @click="$router.back()">
      <i class="iconfont">&#xe679;</i>
    </div>
    <!-- 主图轮播 -->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="photo in detail.photo" :key="photo.id">
        <img v-lazy="photo.url" class="swipe-photo" />
      </van-swipe-item>
    </van-swipe>
    <!-- 标题、价格说明 -->
    <div class="desc">
      <div class="title">
        <van-tag plain type="primary" v-if="detail.isFreePostage" color="#666">包邮</van-tag>
        <span>{{detail.title}}</span>
      </div>
      <div class="price-salenum">
        <div class="price">￥{{ detail.price | money }}</div>
        <div class="sale-num">月销量: {{ detail.saleNum }}</div>
      </div>
    </div>

    <!-- 图文详情 -->
    <van-divider>淘宝图文详情</van-divider>
    <div class="content">
      <img
        v-for="content in detail.descContentList"
        :key="content.photo.id"
        :src="content.photo.url"
        alt=""
      />
    </div>

    <!-- 商品导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="totalAmount" @click="$router.push('/cart')" />
      <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
      <van-goods-action-button type="warning" text="加入购物车" @click="handleAddToCart" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import { getDetail } from '@/api/detail'

export default {
  name: 'Detail',
  data() {
    return {
      detail: null,
    }
  },
  computed: {
    totalAmount() {
      return this.$store.state.cartModule.cart.reduce((sum, prod) => sum + prod.amount, 0)
    },
  },
  created() {
    // // 获取到查询字符串参数（商品id）
    // const { id } = this.$route.query

    // 从路径参数中获取商品 id
    const { id } = this.$route.params
    // 根据 id 查询商品详情
    getDetail(id)
      .then(data => {
        this.detail = data.detail
      })
  },
  methods: {
    /**
     * 加入购物车
     */
    handleAddToCart() {
      // 解构当前商品详情中的各属性
      const { id, title, image, price } = this.detail
      // 构建当前选购的商品对象
      const currentProduct = {
        id,
        title,
        image,
        price,
        amount: 1,
      }
      // 保存到 store 中
      // 组件中不能直接调用到 mutation 方法，而是
      // 需要使用 store.commit() 提交 mutation
      this.$store.commit('cartModule/addToCart', { currentProduct })
      // 提示加入购物车成功
      this.$toast({
        type: 'success',
        message: '加入购物车',
      })
    },
  },
}
</script>

<style lang="less" scoped>
  .back {
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    border-radius: 40px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    position: absolute;
    top: 40px;
    left: 40px;
    font-size: 24px;
    font-weight: 700;
    z-index: 9999;
  }

  .swipe-photo {
    width: 750px;
    height: 750px;
  }

  .desc {
    padding: 12px;

    .price-salenum {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .price {
        color: #f00;
        font-weight: 700;
        font-size: 20px;
      }
      .sale-num {
        color: #ccc;
        font-size: 12px;
      }
    }
  }

  .content {
    padding-bottom: 90px;
    img {
      width: 100%;
      display: block;
    }
  }
</style>
